#cloudinary sdk | Explore Tumblr posts and blogs

matrixtronx · 2 years ago

Text

Exploring the World of AI-Generated Images: From Simple Shapes to Hyper realistic Scenes

Artificial intelligence has come a long way in the field of image generation. From simple shapes to highly realistic scenes, AI is capable of creating a wide range of images that can be used for various purposes.

One of the earliest forms of AI-generated images were simple geometric shapes, such as circles and squares. These shapes were used to study the basics of computer vision and machine learning.

As AI technology has advanced, so has the complexity of the images it is able to generate. Today, AI algorithms can generate images of objects, animals, and even people that are nearly indistinguishable from photographs taken by a camera.

There are several different approaches to generating images with AI. One approach is to use a neural network to learn from a dataset of real images and then generate new images based on what it has learned. Another approach is to use a generative model, which can create images from scratch based on a set of input parameters.

One of the key benefits of AI-generated images is their ability to save time and resources. In industries such as advertising and film, creating high-quality images can be a time-consuming and costly process. AI-generated images can help to streamline this process and create a more efficient workflow.

In addition to their practical applications, AI-generated images also have the potential to be used as a form of artistic expression. By using AI to manipulate and generate images, artists can create new visual styles and forms of artistic expression that would not be possible with traditional methods.

Overall, the world of AI-generated images is an exciting and rapidly evolving field. As AI technology continues to improve, it will be interesting to see the many new and innovative ways that it is used to generate images.

1 note · View note

opensourcefan · 5 years ago

Photo

How to build a React Image Gallery with Cloudinary’s React SDK ☞ https://bit.ly/2z2UBnA #reactjs #javascript

#reactjs #javascript #Redux JS #react js programming #reactjs development

0 notes

thinktanker · 5 years ago

Text

Top Nodejs Frameworks You Should Know About – Checkout in Detail For Each

There are mainly two things to consider when choosing a node.js framework for any of your projects:

How robust and scalable is the platform?

How comfortable is the development process?

Developers prefer a platform that is both advanced and provides flexibility to a diverse range of web applications. This is why NodeJS frameworks have been consistently ranked at the top of solutions for developers. NodeJS is versatile enough to enable building smart, scalable network-based applications on the server-side. As an open-source platform, NodeJS framework is also a cross-platform for JavaScript runtime. Since it is an event-based, non-blocking I/O model, Node.js is extremely lightweight and efficient.

Let us look at some of the best NodeJS frameworks that undoubtedly make your work with JavaScript applications smoother.

HAPI.js

HAPI is one of the most robust and powerful frameworks in use today to build efficient APIs. It has a well-developed plugin system and includes key features such as input validation, configuration-based functionality, implement caching, error handling, logging, and more features. It is one of the big 3 Node.js frameworks as the framework is highly customisable. It is used to develop REST APIs, as well as other software applications.

Hapi.js can be used with MySQL, MongoDB, and Postgres to create potential and static websites. And since it comes with a JavaScript Templating Engine, rendering dynamic content is very easy.

Socket.io

Socket.io is a Javascript library to allow the bidirectional flow of data between the server and the web client in real-time applications. It is a full-stack framework and provides developers with a simple and straightforward API that works seamlessly with every service. Socket.io is chosen for its speed and reliability that is the hallmark of this framework. By providing similar APIs on the server-side section and the web-client section, it works on much higher speeds. It is highly versatile, as it even supports auto-correction, anomaly detection, rendering JSON serializable objects, multiplexing, etc. If you are looking to hire Node.js developer, this should definitely be a part of their skillset.

ADONIS.js

Adonis.js is a Model-View-Controller node.js framework helps developers in building an API Rest with JWT authentication and database access. CLI is bundled into the framework to make it possible to create bootstrap for applications. That is why it is highly recommended for writing scalable server-side applications. It runs on all major OS and developers can easily write different web applications with Adonis in a few lines of code. It offers a consistent ecosystem for developers to create what they need easily and smartly.

Keystone.js

Keystone.js is a full-stack and open-source framework. It is developed in expree.js and MongoDB and is one of the most powerful frameworks for developing database-driven applications, websites, and even APIs. It offers a great Admin UI to let developers manage all their tasks easily and efficiently. Since it can be integrated with online platforms such as Cloudinary, Mandrill, Embedly, and Google Places they can easily manage data handling. It is also compatible with all major OS and provides stable management for the development activities.

Meteor.js

This is one of the fundamentals of Node.js frameworks, as it is a full-stack framework for building real-time applications. It can help developers build both mobile and web-based Javascript applications. Since it shares the same APIs on both the server-side and client-side applications, it provides optimal performance of the applications. A Node.js development company would consider Meteor.js an important part of the technology they use since it gives users the liberty to use any other platform at an instance. If you are hiring a Node.js developer, it is important to gauge whether they have adequate experience with using the pre-written modules.

Koa.js

Most Node.js development companies use Koa.js since it is extremely powerful while being lightweight in terms of its requirements. Koa.js is a small, robust web framework that offers a powerful middleware framework. It can be used to develop potential web-based applications and APIs. If you want potential web-based applications and APIs, you should hire Node.js developers who can leverage Koa.js quality of web applications and error management. It allows developers to work with applications from scratch so they can customise it with features that they need only.

Sails.js

Sails.js is another great MVC micro-framework that offers a great solution for building browser-based applications. If you hire Node.js developer for real-time chat applications, social media applications, multiplayer games or dashboards, chances are they will use this framework to accomplish it. It also offers developers the ease to work with almost any database since it comes inbuilt with the ORM solution. It is highly compatible with quite a few front-end platforms and the developers will find this extremely useful.

Nest.js

A Node.js development company would use Nest.js to develop progressive server-side applications using cumulative Javascript. It offers great typing reliability (as it uses TypeScript) and includes components of FP, OOP, and FRP. When you hire Node.js developer, they will make use of the modular structure of the Nest.js so the code can be arranged systematically in different modules by using external libraries easily. It can be used to build highly scalable, loosely linked, testable, and easily manageable applications and can integrate a lot of unique features.

Loopback.js

This is one of the best enterprise-grade Node.js frameworks that is used by big businesses. It is an highly-extensible framework and is an ideal open-source framework that allows developers to create dynamic REST APIs with very little or no coding. If you want to hire Node.js developer for creating SDKs and API Documentations, it offers the API Explorer widget that comes by default with the framework. It comes with a CLI tool to scaffold the Node.js server. And as a full-stack configuration, developers can use direct filters to easily inquire their database.

Express.js

Any Node.js Development Company would count Express.js as one of the first selections for development. It is well-known for its speed, flexibility and minimalistic approach to delivering adjustable, fast and dynamic features for developing both web and mobile applications. It allows plotting single-page and multi-page and developers can render large HTML pages dynamically. Express.js also lets developers respond to HTTP requests by setting up middlewares. Mostly, it is extremely popular since it supports multiple template engines, easy HTTP methods, and asynchronicity to deliver unbeatable performance.

0 notes

thinktanker-io-blog · 6 years ago

Text

Top Nodejs Frameworks You Should Know About - Checkout in Detail For Each

There are mainly two things to consider when choosing a node.js framework for any of your projects:

How robust and scalable is the platform?

How comfortable is the development process?

Developers prefer a platform that is both advanced and provides flexibility to a diverse range of web applications.

This is why NodeJS frameworks have been consistently ranked at the top of solutions for developers. NodeJS is versatile enough to enable building smart, scalable network-based applications on the server-side. As an open-source platform, NodeJS framework is also a cross-platform for JavaScript runtime. Since it is an event-based, non-blocking I/O model, Node.js is extremely lightweight and efficient.

Let us look at some of the best NodeJS frameworks that undoubtedly make your work with JavaScript applications smoother.

HAPI.js

Hapi.js can be used with MySQL, MongoDB, and Postgres to create potential and static websites. And since it comes with a JavaScript Templating Engine, rendering dynamic content is very easy.

Socket.io

ADONIS.js

Keystone.js

Meteor.js

Koa.js

Sails.js

Nest.js

Loopback.js

Express.js

Any Nodejs development company would count Express.js as one of the first selections for development. It is well-known for its speed, flexibility and minimalistic approach to delivering adjustable, fast and dynamic features for developing both web and mobile applications. It allows plotting single-page and multi-page and developers can render large HTML pages dynamically. Express.js also lets developers respond to HTTP requests by setting up middlewares. Mostly, it is extremely popular since it supports multiple template engines, easy HTTP methods, and asynchronicity to deliver unbeatable performance.

Source: https://www.thinktanker.io/blog/top-nodejs-frameworks-you-should-know-about.html

#NodeJSDevelopmentCompany #nodejsdevelopmentcompanyindia #NodeJSDevelopmentCompanyDubai #NodeJSDevelopmentCompanyUSA #NodeJSDevelopmentIndia

0 notes

t-baba · 6 years ago

Photo

How Googlebot runs JavaScript, a new JS platform for HTTP services, and some JavaScript podcasts

#446 — July 19, 2019

Read on the Web

JavaScript Weekly

Smashtest: A Language for Describing Test Cases — A Cucumber-esque way to write end to end tests in a more natural way but which essentially boil down to JavaScript powered tests. The examples on the homepage do a good job of selling the idea IMHO.

Smashtest

Introducing Osgood: A New V8-Based Platform for Building HTTP Servers — Built using Rust and the V8 JavaScript engine, Osgood is a new platform (a la Node) focused around building secure HTTP services. Security comes by demanding that I/O requirements are specified and enabled ahead of time. GitHub repo.

Thomas Hunter II

Triggering Trusted CI Jobs on Untrusted Forks — In this post, we discuss how to use Git itself as a means for marking code as trusted and we walk through a full demonstration of how these concepts can be applied to a specific repository host (GitHub) and CI provider (CircleCI).

CircleCI sponsor

▶ JavaScript, JavaScript…. Rocks You! — A fun, musically-packed look at how to recreate the sounds of effects pedals in JavaScript to play with audio in real time via the Web Audio API.

Vitalii Bobrov

Quark: A Software 'Sketchbook' for Node, HTML and CSS Experiments — Built in Electron but currently for Windows and Linux only, Quark is a Jupyter Notebook/Glitch-esque development environment for quickly creating HTML, CSS and JavaScript-based apps, complete with access to Node’s APIs and Electron’s native features.

Nishkal Kashyap

Google Explains the JavaScript SEO Basics — Did you know that when Googlebot is crawling the Web, it runs a version of Chromium behind the scenes and actually runs your JavaScript? This means there are some things to be aware of.

Google Developers

🎧 Some recent JavaScript podcast episodes

There are several great JavaScript podcasts out there. Here are some the recent episodes we've enjoyed:

▶ The Fundamentals of JavaScript — Wes Bos (of JavaScript 30 fame) and Scott Tolinski discuss the fundamentals of JS and what you really must know.

Syntax.fm

▶ How Christian Heilmann Got into JavaScript — My JavaScript Story is a podcast that interviews JavaScript developers about how they got into JavaScript. I particularly enjoyed Chris Heilmann’s (a popular JavaScript speaker) episode, but there are lots to enjoy.

My JavaScript Story

▶ The Benefits and Challenges of Server-Side Rendering (SSR) — An hour-long round table discussion featuring Dan Shappir, performance tech lead at Wix.

JavaScript Jabber

▶ Discussing Managing Your npm Dependencies with Jan Lehnardt

Real Talk JavaScript

💻 Jobs

Frontend Engineer at Goodreads (Amazon) — Join Goodreads to build the frontend of a highly ambitious product that supports reading activities of more than 80 million readers.

Goodreads

Front End Engineer / TrackVia (Denver, CO) — TrackVia powers drag-n-drop creation of sophisticated enterprise apps. Join our fun & fast-pace team in beautiful downtown Denver.

TrackVia

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials, Opinions, and Videos

Tetris Turns 35, so Let's Build a Tetris Clone — A guide to what’s involved in putting together your own Tetris clone with a nifty visual twist.

JavaScript Teacher

Is postMessage Slow? — A fantastic deep dive into performance issues and concerns around postMessage, a method used to send messages into a Web Worker.

Surma

Async Await Error Handling in JavaScript — Attempts to clear up some confusion caused when handling errors in async/await scenarios.

Valeri Karpov

Comprehensive Image & Video Management with Our JavaScript SDK — Upload, manipulate, optimize, & deliver rich media with code that integrates seamlessly. Try Cloudinary for free.

Cloudinary sponsor

A Look at Private Class Fields, a Proposed JavaScript Feature — A few weeks ago Axel covered public class fields, but private fields are part of the proposal too (currently at stage 3).

Dr. Axel Rauschmayer

A 'Falling Sand'-Style Image Transition Effect in 16 Lines of JS — This is a lot neater than I was expecting.

Slicker

Reverse Engineering, or How YOU Can Build a Testing Library in JavaScript — The goal here is not to add another testing library to the giant pile of existing ones, but to learn more about how they work by building your own.

Chris Noring

Finally... A Post on finally in Promises — A quick explanation of when finally will fire when using a promise.

Sarah Drasner

Node.js 12: The Future of Server-Side JavaScript — Node.js 12 introduced several exciting improvements like ES6 module support, better application security, and quicker startup times.

Paige Niedringhaus

Angular Architecture Patterns and Best Practices (That Help to Scale)

Bartosz Pietrucha

Web Unleashed - The Front-End Developer Event in Toronto, Sept 13-14 — Networking, sessions, workshops and more. Save 20% on tickets to #WEBU19 with code JAVASCRIPTWEEKLY

FITC sponsor

Learn Svelte 3 by Building a Todo List App — A practical introduction to Svelte, a build-time UI framework that’s been getting a lot of love recently.

Ayo Isaiah

The Web Can't Survive a Monoculture — You have the power to prevent the Web becoming a Chrome-dominated monoculture, says Mike.

Mike Pennisi

🔧 Code and Tools

Color Thief: Grab Color Palettes from Images — Given an image, this uses canvas to return a list of the dominant colors.

Lokesh Dhakar

Polly.js: Record, Replay, and Stub HTTP Interactions — Working with both Node and in the browser, Polly taps into HTTP APIs and adds the ability to record and replay requests plus even slow down or speed up time.

Netflix, Inc.

MongoDB Atlas is a Powerful and Reliable Cloud Database. Try Now

MongoDB sponsor

Airtable.js: A JavaScript Client for Airtable — Airtable is a popular cloud-based spreadsheet-meets-database service. We use it at Cooperpress so it’s great to see a well maintained official library.

Airtable

SurveyJS: A JavaScript Survey and Form Library — Here’s a live demo.

Devsoft Baltic OÜ

jest-puppeteer: Run Your Tests using Jest and Puppeteer

Smooth Code

⚡️ Quick Releases

Popular libraries and tools with recent releases that don't need a full write-up:

Ember 3.11 — also my favorite version of Windows, incidentally.

Mocha 6.2.0 — Popular testing framework.

Lerna 3.16.0 — Tool for managing JS projects with multiple packages.

Johnny Five 1.2.0 — JS robotics and IoT framework.

SystemJS 4.1.0 — Dynamic ES module loader.

MDX 1.1 — Embed JSX inside Markdown documents.

melonJS 7.1 — Lightweight game engine.

autoComplete.js 6.1 — Simple, vanilla JS auto completion library.

P.S. Did you know we're on Twitter as well? Follow us @JavaScriptDaily

by via JavaScript Weekly https://ift.tt/2xW5TFI

#Javascript Branding #Javascript Weekly

0 notes

charlenejpatterson · 7 years ago

Text

Marketing Day: Facebook hiring lobbyists, Google Surveys goes global & Springbot opens a customer data co-op

Here’s our recap of what happened in online marketing today, as reported on Marketing Land and other places across the web.

From Marketing Land:

Report: Facebook on lobbyist hiring spree Mar 28, 2018 by Greg Sterling

Facebook is reportedly already third in lobbying spending after Alphabet and Amazon.

Google Surveys now available in more than 50 countries Mar 28, 2018 by Amy Gesenhues

Companies can use the free or enterprise paid version to collect consumer insights in more countries.

Springbot opens a customer data co-op for retail SMBs Mar 28, 2018 by Barry Levine

The new Exchange enables lookalike matching, followed by a drip email campaign for prospects.

Know the facts (and avoid the myths) of martech Mar 28, 2018 by Scott Brinker

Splashy vendor-sponsored events have their place — if superficial celebrity keynotes and product roadmap presentations from the CEO are your thing. But what you don’t get is unvarnished access to what really matters: the good, the bad and the ugly of procuring, implementing and operating marketing technology solutions. And that’s what you really want, right? […]

4 ways brands can win the digital shelf in 2018 Mar 28, 2018 by Andrew Waber

Innovators like Amazon keep upping the ante in online retail. Contributor Andrew Waber helps retail marketers catch up with insights into what consumers want.

Hijacking Google search results for fun, not profit: UK SEO uncovers XML sitemap exploit in Google Search Console Mar 28, 2018 by Michelle Robbins

SEO wins bug bounty from Vulnerability Reward Program, Google search team confirms the exploit no longer works

Recent Headlines From MarTech Today, Our Sister Site Dedicated To Marketing Technology:

ContentSquare’s new integration with Adobe Analytics lets marketers know which page elements perform best Mar 28, 2018 by Barry Levine

The Paris-based firm says this integration offers the most detailed insights on page components to users of Adobe’s marketing tools.

Know the facts (and avoid the myths) of martech Mar 28, 2018 by Scott Brinker

Using mobile location data to improve bank marketing results: A how-to guide Mar 28, 2018 by Michael Della Penna

Columnist Michael Della Penna explores the challenges and opportunities that location data present for financial services marketers.

MarTech Today: Springbot’s data coop for SMBs, Suzy’s new crowd intelligence platform & Oracle’s Java lawsuit against Google returns Mar 28, 2018 by Barry Levine

Here’s our daily recap of what happened in marketing technology, as reported on MarTech Today, Marketing Land and other places across the web. From MarTech Today: Springbot opens a customer data co-op for retail SMBs Mar 27, 2018 by Barry Levine The new Exchange enables lookalike matching, followed by a drip email campaign for prospects. The […]

Salesforce invests in email capabilities with new Content Block SDK for email marketing Mar 28, 2018 by Robin Kurzer

The CRM company says that it will continue to innovate in the email space because it is the most valuable channel with the highest ROI.

Delivering optimized media-rich content for mobile Mar 28, 2018 by Sponsored Content: Cloudinary

We all know the adage, “A picture is worth a thousand words,” meaning that a complex idea can be conveyed in just one image. The phrase was made popular nearly 100 years ago in an article about the power of images in advertisements, and the sentiment rings just as true in today’s always-on digital age. […]

The post Marketing Day: Facebook hiring lobbyists, Google Surveys goes global & Springbot opens a customer data co-op appeared first on Marketing Land.

0 notes

riichardwilson · 5 years ago

Text

Upleveling your digital asset management strategy for the modern workforce

Visual content offers a powerful way to connect with and engage consumers. It also helps companies maintain a competitive advantage where such an edge matters. But when it comes to creating, managing, and publishing the volumes of content required to win the engagement game today, it can be a challenge just to keep up. Those in charge of assets must think through every possible variation ahead of time and create a huge number of variants of each asset, for every channel and screen size on which it might be displayed.

In most organizations, it’s also hard to make sure every team has access to these assets when they need them, and that they know how to optimize them for each channel they use them on. Now that the COVID-19 pandemic has led to widespread remote work and distributed teams – not to mention more fluid work schedules – it is even more challenging to establish and maintain efficient and productive workflows.

Expecting creatives and developers to address these needs and challenges alone zaps resources and misallocates the skillsets of your most talented people. Your teams should be brainstorming new content ideas, dreaming up unique visual experiences, and strategizing on campaign elements – not worrying about file sizes and cropping ratios. Fortunately, it doesn’t have to be this way.

A well-designed DAM (Digital Asset Management) solution handles this at-scale content demand with ease. Advanced DAMs have moved beyond once-rudimentary databases for ingesting, storing, and accessing assets. Today, they automatically manage huge chunks of the optimization and delivery process for you. They generate variants through intelligent cropping and resizing, and make it incredibly simple to produce new assets from existing ones. Holistically, modern DAMs improve workflows across the enterprise. Here’s how.

AI-driven organization and analytics are a powerful combination for campaign planning

Three core capabilities of dynamic DAMs include the ability to automatically transform and optimize assets, preview the variations easily, and finally, publish the assets in an optimal format. Before this can happen, though, organizations need to get their arms around the assets already in their arsenal, which requires informed planning assisted by AI.

For brands with massive libraries of imagery and videos, AI automatically identifies content to facilitate the rapid deployment of metadata, adding the appropriate tags or search terms to make content instantly searchable. This is especially useful for media libraries that serve retail, tourism and hospitality. For example, the value of AI can really be appreciated when you think of the number of apparel pieces – and how many product photos each of them require – retailers need to prepare and display each fashion season.

In most scenarios, it’s best to not reinvent the content wheel if you don’t have to. In many cases, teams will request a new custom image when an existing asset already works for the experience they want to deliver, they just don’t know it’s available. In a modern DAM with AI-fueled tagging and analytics, content-creating teams can know with certainty what they already have. If an asset is rarely used, the analytics can speak to why that is, enabling teams to enhance the asset or create a different version. User-engagement metrics help content creators gain valuable insights in order to repurpose or optimize existing content.

Critical image and video transformation is expedited with AI

In addition to keeping the whole organization organized and helping them source the assets they need, AI shoulders the burden of editing and optimization. It can automatically pinpoint the primary foreground subjects in a photo, manipulating the background to eliminate distracting content. Because the asset will be displayed on various devices and screen sizes, AI auto-crops images each required aspect ratio. Everything takes place within the DAM, so there is no need to download assets, edit in external tools, and reupload new versions.

As much as content is king, video in many ways reigns supreme. Back to the retail example: a photo of a handbag quickly registers in a consumers’ mind when they first see it, helping them to notice close-up details of the material or stitching, or how many interior pockets the bag has. But a 10-second video clip on that product page, showing a woman packing the purse with ease, and suddenly the true form and function of the handbag resonates with the shopper.

That’s why dynamic video transformation is key when selecting a DAM. By leveraging AI, dynamic DAMs create short previews of a video, focusing only on the most important and compelling section. Videos can be streamed on the DAM during their encoding phase. Uploaded videos can be automatically transcoded and optimized for any web browser and mobile device, and videos, just like images, can be resized and cropped intelligently.

How to deploy a DAM, considering emerging technology and distributed workforces

With sights set on implementing a truly modern DAM, it’s important to know the boxes to check when evaluating options. Having a single, cloud-based platform is a top priority, which has been made more obvious in the times of COVID-19 with more physically distributed teams and remote collaboration. A SaaS-based DAM solution breaks down logistical barriers to accessing the platform, wherever a team member might be working from, so that work can continue without interruption. Think of a DAM as the productivity bridge, closing the functional gap between asset management and content delivery.

What other advanced capabilities are needed for creating modern asset workflows, supported by DAMs? Over the past several years, workflows have certainly evolved. Simply ingesting assets, storing them in some organized fashion, and allowing for access and searchability are bare-bones DAM requirements at this point. Today, look for a DAM that is by nature:

Mobile-first, automatically adapting assets to display attractively on any device or screen size – including mobile – which requires intelligent cropping, resizing, and adjustments made on the fly.

Supportive of rich media, able to transform next-generation image formats, videos, 3D models, animated GIFs, and 360-degree images. Tools in these cutting-edge DAMs automatically transcode, crop, and resize all rich media to create multiple versions for different uses.

Equipped for last-mile asset delivery, delivering creative assets to end-users at high quality and quick load times. DAMs generate URLs for assets, which can be used directly in websites and mobile apps to ultimately deliver content through a fast Content Delivery Network (CDN).

Setting up DAM as a critical core platform with tech-stack integration

Importantly, the boundaries of DAM are extensible, and the organization-wide possibilities aren’t limited by the list of platform features. That’s because DAM capabilities are extended through integrations with many other valuable enterprise systems your teams rely on daily. Just make sure that your DAM system has built-in connectors for all the systems that work with creative assets: CMS, eCommerce platforms, Product Information Management (PIM) systems, CRM systems, BPM and ERP tools, social media, and marketing agency tools. Ensuring this on the front end, prior to sealing the deal, will help to future-proof your team’s content expertise and the resulting gains in efficiency.

To make these integrations a reality, the DAM should include a host of APIs, SDKs, and Widgets that make other systems easy to integrate. If there’s cohesion across your tech stack, you can quickly eliminate barriers to asset delivery. Especially important? You’ll ensure a single source of truth for every asset across every team and asset delivery. This single source of truth goes a long way in maintaining brand standards, enforcing usage or copyright compliance, and tracking version history.

Prioritizing company culture and buy-in as you implement

A DAM solution will bring new levels of efficiency to an organization and solve for many issues teams constantly facet. However, if you don’t involve your people in the planning for and implementation of your DAM, you may be fighting a battle of the wills so that the DAM can play the best supporting role possible.

One way to ensure a DAM platform boosts the work already being done well is to identify the critical business workflows that relate to content – this goes beyond just the marketing agency team or graphic designers, to gain perspective from developers and IT stakeholders whose voices matter in the conversation. Interview team members who frequently perform those tasks so that you can better understand their needs, and then, together, identify clear opportunities for automation. When these opportunities are agreed upon, ready adoption of new asset workflows improves. Automated workflows will improve productivity and increase the usage of visual assets, but it’s also reliant on teams communicating to ensure the wheels keep turning.

DAM is a truly foundational platform for executing campaigns across every business group in a modern economy and a critical part of the martech stack for organizations today and moving forward.

About The Author

Cloudinary’s mission is to empower companies to deliver visual experiences that inspire and connect by unleashing the full potential of their media. With more than 40 billion assets under management and 6,500 customers worldwide, Cloudinary is the industry standard for developers, creators and marketers looking to upload, store, transform, manage, and deliver images and videos online. Leading brands are seeing significant business value using Cloudinary, including faster time to market, higher user satisfaction and increased engagement and conversions. For more information, visit www.cloudinary.com.

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/upleveling-your-digital-asset-management-strategy-for-the-modern-workforce/ source https://scpie.tumblr.com/post/623863968688177152

0 notes

scpie · 5 years ago

Text

Upleveling your digital asset management strategy for the modern workforce

AI-driven organization and analytics are a powerful combination for campaign planning

Critical image and video transformation is expedited with AI

How to deploy a DAM, considering emerging technology and distributed workforces

Setting up DAM as a critical core platform with tech-stack integration

Prioritizing company culture and buy-in as you implement

DAM is a truly foundational platform for executing campaigns across every business group in a modern economy and a critical part of the martech stack for organizations today and moving forward.

About The Author

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/upleveling-your-digital-asset-management-strategy-for-the-modern-workforce/

0 notes

laurelkrugerr · 5 years ago

Text

Upleveling your digital asset management strategy for the modern workforce

AI-driven organization and analytics are a powerful combination for campaign planning

Critical image and video transformation is expedited with AI

How to deploy a DAM, considering emerging technology and distributed workforces

Setting up DAM as a critical core platform with tech-stack integration

Prioritizing company culture and buy-in as you implement

DAM is a truly foundational platform for executing campaigns across every business group in a modern economy and a critical part of the martech stack for organizations today and moving forward.

About The Author

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/upleveling-your-digital-asset-management-strategy-for-the-modern-workforce/ source https://scpie1.blogspot.com/2020/07/upleveling-your-digital-asset.html

0 notes

mbaljeetsingh · 8 years ago

Text

Overlay Glasses/Masks on Avatars with Vue.js and Cloudinary

Deep Learning, a subset of machine learning, helps break down tasks in ways that makes all kinds of machine assists seem possible. With deep learning, it is now possible to do image recognition by machines. Instead of hand-coding software programs with a specific set of instructions to accomplish a particular task, the machine is trained using large amounts of data and algorithms that give it the ability to learn how to perform the task.

Even though you might posses the technical know-how to train models to identify images, and perform some next level facial attribute detection, you now can leverage existing cognitive services to do your bidding.

What We'll Build

In this article, we’ll build a demo app with Cloudinary and Microsoft Cognitive service in which users can test different glasses and masks to see it looks on them before making a purchase.

Applying deep learning to enhance our business? Yes, we are!

What is Cloudinary?

Cloudinary is a cloud platform that provides solutions for image and video management, including server or client-side upload, a huge range of on-the-fly image and video manipulation options, quick content delivery network (CDN) delivery and powerful asset management options.

Cloudinary enables web and mobile developers to address all of their media management needs with simple bits of code in their favorite programming languages or frameworks, leaving them free to focus primarily on their own product's value proposition.

Let’s Get Started

Step 1: Create a Cloudinary Account

Once you are signed up, you will be redirected to the dashboard where you can get your credentials.

Take note of your Cloud name, API Key and API Secret

Step 2: Set Up A Node Server

Initialize a package.json file:

npm init

Install the following modules:

npm install express connect-multiparty cloudinary cors body-parser --save

express: We need this module for our API routes connect-multiparty: Needed for parsing http requests with content-type multipart/form-data cloudinary: Node SDK for Cloudinary body-parser: Needed for attaching the request body on express’s req object cors: Needed for enabling CORS

Step 3: Activate Advanced Facial Attributes Detection Add-on

Go to the dashboard add-ons section. Click on Rekognition Celebrity Detection Add-on and select the Free Plan.

Note: You can change to other plans as your usage increases.

Step 4: Identify Facial Attributes

Create a server.js file in your root directory. Require the dependencies we installed:

const express = require('express'); const app = express(); const multipart = require('connect-multiparty'); const cloudinary = require('cloudinary'); const cors = require('cors'); const bodyParser = require('body-parser'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.use(cors()); const multipartMiddleware = multipart();

Next, configure Cloudinary:

cloudinary.config({ cloud_name: 'xxxxxxxx', api_key: 'xxxxxxxx', api_secret: 'xxxxxxx' });

Replace xxxxxx with the real values from your dashboard.

Add the route for uploading. Let’s make the route /upload.

app.post('/upload', multipartMiddleware, function(req, res) { // Upload to Cloudinary cloudinary.v2.uploader.upload(req.files.image.path, function(error, result) { res.json(result); }, // Specify Transformation & Facial Attributes Detection { transformation: [ { width: 700, radius: "max", crop: "scale" }, { flags: "region_relative", gravity: "adv_eyes", overlay: req.body.item, width: "1.7" } ] });

Quickly take a look at the overlay parameter. It takes in a value of req.body.item. In this app, the values are either glasses or harlequinmask.

Note: I uploaded two photos to my Cloudinary account and made sure they were renamed glasses and harlequinmask. These are the two images we will use as overlays in this app.

harlequinmask and glasses respectively. Go ahead and upload them to your account too.

The Advanced Facial Attribute Detection add-on detects specific facial attributes, including the exact position of the eyes of each face in a photo. Based on this information, Cloudinary can position overlays on top of all the detected eye pairs in an image.

To smartly overlay the glasses or harlequinmask on top of the detected eye pairs in the image, the user uploads, the overlay parameter is set to the ID of the harlequinmask or glasses image and the gravity parameter is set to adv_eyes. We also set the _regionrelative flag together with a 1.7 width to scale the overlay to 170 percent of the width of the detected eyes, and resize the image to an oval thumbnail with a width of 700 pixels.

Once a user makes a POST request to the /upload route, the route grabs the image file from the HTTP request, uploads to Cloudinary, identifies the pair of eyes and overlays them with whatever option the user chooses (either glasses or harlequinmask) and returns the right URL.

Note: The Advanced Facial Attribute Detection add-on is an integrated face detection solution that utilizes Microsoft Cognitive Services. Microsoft Cognitive Services provides high precision face location detection with state-of-the-art, cloud-based algorithms that can detect up to 64 human faces in an image. The detected faces are returned with rectangles (left, top, width and height) indicating the location of faces in the image in pixels, the exact position details of the eyes, mouth, eyebrows, nose and lips, as well as a series of face-related attributes from each face, such as pose, gender and age.

Test the functionality with Postman.

Step 5: Build the Frontend

We’ll use the progressive framework, [Vue.js] to quickly flesh out the frontend. Let’s get started by installing the CLI:

npm install -g vue-cli

Next, create a simple Vue project using the Vue CLI tool we installed:

vue init simple productshowcase

Inside the productshowcase directory, create an index.html file and add the following code to it:

<!DOCTYPE html> <html> <head> <title>Welcome to Vue</title> <script src="http://ift.tt/2nlicUC;></script> <script src="http://ift.tt/2oYI3XH;></script> <link rel="stylesheet" href="http://ift.tt/2cYLUyN; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div id="app"> <div class="container" style="margin-top: 3%; margin-left: 2%;"> <div class="col-md-6"> <div> <div class="col-md-6"> <img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1505797868/glasses.png" width="200" height="100" /> <span> Glasses </span> </div> <div class="col-md-6"> <img src="http://ift.tt/2y6KlrH; width="200" height="100" /> <span> Harlequin Mask </span> </div> </div> <hr /> <form enctype="multipart/form-data" @submit.prevent="onSubmit"> <div class="form-group"> <select class="form-control" name="item" v-model="model.item"> <option disabled value="">Choose an item</option> <option value="glasses"> Glasses </option> <option value="harlequinmask"> Harlequin Mask </option> </select> </div> <div class="form-group"> <label for="">File:</label> <input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"> </div> <div class="form-group"> <button class="btn btn-primary" >Upload</button> </div> </form> </div> <div class="col-md-4"> <div class="col-md-6" style="margin-top: 20%;"> <img id="originalface" class="img-responsive" alt="" width="600" height="600"> </div> <div class="col-md-6" style="margin-top: 20%;"> <img :src="maskedface" class="img-responsive" alt="" width="400" height="400"> </div> </div> </div> </div> <script> new Vue({ el: '#app', data: function() { return { model: { text: '', image: null, item: '' }, maskedface: null, loading: '', } }, methods: { upload: function(files) { this.model.image = files[0] this.showPreview(files[0]); }, showPreview: function(file) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("originalface").src= e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(file); }, onSubmit: function() { // Assemble form data const formData = new FormData() formData.append('image', this.model.image); formData.append('item', this.model.item); this.loading = "Processing....Please be patient." // Post to server axios.post('http://localhost:3333/upload', formData) .then(res => { // Update UI this.maskedface = res.data.url this.loading = '' }) } } }) </script> </body> </html>

Now, run the app.

What’s going on here? Don’t be scared, let’s step through the code. First we have a form for uploading of images.

<form enctype="multipart/form-data" @submit.prevent="onSubmit"> <div class="form-group"> <select class="form-control" name="item" v-model="model.item"> <option disabled value="">Choose an item</option> <option value="glasses"> Glasses </option> <option value="harlequinmask"> Harlequin Mask </option> </select> </div> <div class="form-group"> <label for="">File:</label> <input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"> </div> <div class="form-group"> <button class="btn btn-primary" >Upload</button> </div> </form>

We bind the upload form to an upload event handler. There is a change event attached to the select file button. Once a user selects a file, the showPreview method called in the Vue instance below is invoked. This method shows a thumbnail preview of the image about to be uploaded.

Thumbnail preview of the image about to be uploaded.

Check out the methods, model and data properties on our Vue instance.

new Vue({ el: '#app', data: function() { return { model: { text: '', image: null, item: '' }, maskedface: null, loading: '', } }, methods: { upload: function(files) { this.model.image = files[0] this.showPreview(files[0]); }, showPreview: function(file) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("originalface").src= e.target.result; }; // read the image file as a data URL. reader.readAsDataURL(file); }, onSubmit: function() { // Assemble form data const formData = new FormData() formData.append('image', this.model.image); formData.append('item', this.model.item); this.loading = "Processing....Please be patient." // Post to server axios.post('http://localhost:3333/upload', formData) .then(res => { // Update UI this.maskedface = res.data.url this.loading = '' }) } } })

When the form is submitted, it calls the onSubmit function in our Vue method. The onSubmit method then makes a post request to the backend and returns data back to the frontend.

The data returned is the modified image with the overlay. And this reflects on the UI.

Harlequin Mask selected and an Image of Rihanna uploaded.

Glasses selected and an Image of Christian Nwamba, a.k.a codebeast, uploaded!

Feel free to check out the source code here.

Conclusion

We just performed a facial attribute detection together with an Image overlay transformation with Cloudinary. The options are limitless as to what you can do with the information in this tutorial.

Go forth and enhance your business with products that users will love. And Oh you don’t have to spend time building them, Cloudinary’s got you!

via Scotch.io http://ift.tt/2g9Rm43

#IFTTT #Feedly

0 notes

webbygraphic001 · 8 years ago

Text

How to Build Banners With Custom Fonts Using Just Urls

Designing fun, visually appealing party banners can be a complicated task if you don’t have enough graphic design experience or know how to use image editing software, such as Photoshop or Sketch. Buying and installing an image editing software, installing custom fonts, designing the graphics and figuring out how to apply a text overlay can take a great deal of time and cost a lot of money… However, there is another option—Cloudinary—that is easy to use and can speed the design process with the use of a single URL.

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, administration, image manipulation and delivery. One example of image manipulation features is Image Text overlays (which is the topic of discussion).

In this post, I will show you how to achieve the image overlay in the example above using Cloudinary, not just with common fonts, but with any custom font of your choice. At the end, you will see how simple, powerful and flexible this solution is compared to using graphics editing software.

1. Setup Cloudinary

Cloudinary is simple to setup and use. You just need to create an account, after which you’re assigned a cloud storage for your images:

Create a FREE Cloudinary account using the signup form.

When you sign up successfully, you’re presented with a dashboard that holds your cloud credentials. You can safely store them for future use:

2. Upload Images

Now that you have a free Cloudinary account, you can give it a test drive. Go to the Media Library and upload some images to your cloud:

As you can see, the upload widget enables you to either upload from your computer or provide a link. Don’t bother about hunting for nice pictures on your computer, you can use what I got you from Pexels.

Click on the thumb showing the image you uploaded and copy the link from the image’s details page.

This is the what the original image looks like after scaled down to 700px width:

Cloudinary Offerings

Before we start implementing the text overlay feature, let me tell you about the core Cloudinary offerings:

Storage: We encountered this feature while uploading images to the server.

Delivery: The URL we got from the media library is what we use to deliver images from Cloudinary.

Transformation: Cloudinary enables you to manipulate images by adjusting URL parameters in the delivery URL. The image above is transformed before delivery by adding the transformation parameter ‘w_700’ which scales the image from it’s original 1,000+ pixel width to 700px.

3. Text Overlay

Text overlays in this context refers to applying characters as a mask on graphic images. This process is commonly used in image editing tools like Photoshop, Sketch or Illustrator, where you import an image to your work art board and use the text control to apply characters above the image. For example:

The text printed on the party background image is what is referred to as “text overlay.”

I used the font Verdana in the “JOHNSONS PRESENT” text in the example above. Verdana is a popular font and is readily available as a common font. However, in some situations, you may need to use custom fonts. In this case, you could go to a website like dafont.com, download a custom font, install on your machine and use in your designs.

Text overlays are applied as transformation via the transformation parameters, much like what we did with the width of the party image. The following example shows a text overlay on the image:

http://ift.tt/2uysCre

This URL defines the many features going on with this image transformation:

w_700: Scales down the image to 700px

l_text: Defines the overlay text to be placed on the an image. This is a transformation feature.

Verdana: Font style

20: Font size

bold: Font weight

underline: Text decoration

JOHNSONS%20PRESENTS: URL encoded overlay text

g_north: Text location which is top of the image.

y_25: y axis offset of the text from the top in percentage

co_rgb:F9583: Text color for the overlay

4. Custom Fonts

Our party banner is taking shape, but to make the banner more festive, we want to add some crazy fonts. We don’t commonly see crazy fonts, hence you shouldn’t expect to see one. This is why you cannot just use l_text:CrazyFont.

Cloudinary is very flexible, though. You can upload your own custom font to Cloudinary, then use its public ID as the l_text value. Midnight Valentine is a typical party font that we can use. Download the zipped file, unzip, and upload the .ttf font file.

(NB: You can only upload .ttf or .otf fonts.)

You need to specify the type as authenticated and resource type as raw. You can do this while uploading via SDKs. Say Node for instance:

var cloudinary = require(’cloudinary’)

// Credentials retrieved from dashboard

cloudinary.config({

cloud_name: 'CLOUD_NAME',

api_key: 'API_KEY',

api_secret: 'API_SECRET'

})

cloudinary.v2.uploader.upload(

__dirname + '/Midnight-Valentine.ttf',

{resource_type: 'raw',

type: 'authenticated',

public_id: 'Midnight-Valentine.ttf'},

function(error, result) {

console.log(result, error)

})

You can now deliver the image using the custom font we uploaded:

http://ift.tt/2vxSd0u

We chained another transformation to what we had before. This time, the l_text’s font style value is now Midnight-Valentine.ttf which is the public ID of the font we uploaded. We removed the g_north property, as well as the y property, so the overlay position stays at the default location, which is the center of the image.

Let’s have some more fun adding the venue and date of the party:

http://ift.tt/2vxMwzQ

Conclusion

The first image shown at the beginning of this article was designed in Sketch. The last image was built by composing parameters in a URL. You can imagine how powerful the latter is. Knowing the right properties in Cloudinary to use will enable you to start generating graphics dynamically without the help of a graphics designer.

You can learn more about these properties from the Cloudinary docs.

[– This is an advertorial on behalf of Cloudinary –]

5,000+ Pixel-Perfect Icons from Icon54 – only $24!

Source from Webdesigner Depot http://ift.tt/2uEiwWz from Blogger http://ift.tt/2u5Zt5Z

#Blogger

0 notes

mbaljeetsingh · 8 years ago

Text

Create Scotch-Like Image Cards in Angular 2+ with Cloudinary

When it comes to managing media files, we rely on Cloudinary for its ease and efficiency. The Cloudinary tool enables us to adeptly handle storage, transformation, and calculated delivery, so we can focus simply on uploading and fetching images with little configurations to suit our needs.

Because we have previously written about Cloudinary’s features, we won’t go into detail about them here. Instead, we’ll focus on how we can integrate Cloudinary in Angular 2x.

Cloudinary has just released a new SDK release for this integration, so we will explore what this SDK has to offer and show how to use the SDK to deliver animated image cards as seen on Scotch.io home page.

What we will build

Setup Environment

Angular CLI is the quickest way so far to create an Angular project. It takes only two steps: Install the CLI tool (if you haven’t) and create a new project with it. The installation should be done via npm, thus:

npm install -g angular-cli

Create a new project with the tool by running the following command:

# Create new project ng new scotch-cards # Enter project folder cd scotch-cards # Run app ng-serve

With the Angular project created, now install the Cloudinary SDK via npm:

# install Cloudinary npm install @cloudinary/angular cloudinary-core --save

The SDK is based on Cloudinary’s JS module, cloudinary-core, and entirely decoupled, so you have to install both. Decoupling the both libraries allows you to use the SDK features that do not require the JS module without having to bear the burden of size.

Due to the limitations in Angular CLI project (not exposing resolve aliases, not having an addon system ready yet) you need to install lodash since cloudinary-core depends on it.

Let’s import and provide the SDK to our app module so we can gain access to its APIs and components:

// ./src/app/app.module.ts import { HttpModule } from '@angular/http'; import { CloudinaryModule } from '@cloudinary/angular'; import * as Cloudinary from 'cloudinary-core' import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ HttpModule, CloudinaryModule.forRoot(Cloudinary, { cloud_name: 'cloud_name'}), ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }

Importing the module gives you access to the SDK’s directives and components. The import is configured using the static forRoot method, passing in Cloudinary’s JS core and the config object.

The config object contains a cloud_name property, which is received upon creating a free Cloudinary account. The cloud_name is available on the dashboard.

Another important thing to include is the typings.d.ts to shut TypeScript from screaming that the module, cloudinary-core is not defined. You need to declare the cloudinary-core in this file:

// ./src/typings.ts declare module 'cloudinary-core';

Cloudinary Components and Directives

To start delivering images from your Cloudinary cloud using this SDK, you need to become comfortable with the components and directives made available by the SDK. Let’s explore them:

Components

is used to deliver images to the browser. It requires public-id, which is a reference to the image hosted on the cloud. So if we have something like:

cl-image secure="true" public-id="cat" class="cat_image" format="jpg"> cl-image>

We get:

img class="cat_image" public_id="cat" src="http://ift.tt/2kVfQh7;>

By default, Cloudinary delivers media files using non-secure URLs. However, the secure attribute, when applied, instructs Cloudinary to deliver media files using a secure URL (HTTPS).

just like is used to deliver videos. Most important property is still the public-id of the video to be delivered:

cl-video public-id="dog" class="dog_video" controls="true" preload="none"> cl-video>

Output:

video secure="true" _ngcontent_ymq_2="" class="dog_video" controls="true" preload="none" public_id="dog" ng_reflect_public_id="dog" poster="http://ift.tt/2lajlyz;> source src="http://ift.tt/2kVoJqX; type="video/webm"> source src="http://ift.tt/2lacDIZ; type="video/mp4"> source src="http://ift.tt/2kVdIpC; type="video/ogg"> video>

Cloudinary will automatically convert your videos to HTML5 and mobile-friendly formats for optimized viewing on all web browsers and mobile devices.

is used to apply transformations to both images and videos. You can read more about Cloudinary transformation here.

Transformations can be applied multiple times to either of the delivery components:

cl-image secure="true" public-id="angular_logo" class="logo" angle="20" format="jpg"> cl-transformation height="150" width="150" crop="fill" effect="sepia">cl-transformation> cl-transformation overlay="text:arial_20:Angular" color="#EECCAA" gravity="south" y="20">cl-transformation> cl-image>

Multiple transformation are chained, therefore, the transformation are applied in order of listing and you can apply as many as needed to ensure your media appears correctly. Chaining transformations enables you to edit a media files based on the previous transformation. For example, it makes more sense to apply a border radius to an image after it has been cropped. Therefore, the cropping transformation will come first and then the border radius transformation will be chained to it, and so on.

The above example will generate the following HTML:

img class="logo" _ngcontent_ovt_3="" public_id="angular_logo" ng_reflect_public_id="angular_logo" src="http://ift.tt/2kVeT8A;>

The transformation is applied to the URL and each chained transformation is separated with /.

Attribute Directives

clSrc: You might not want Cloudinary generating the image tag for you. Sometimes what you need is just the URL. The clSrc attribute directive does just that:

img clSrc="cat" alt="Cat Image" />

clHref just like clSrc is used to generate the image URL for an anchor tag, not an image tag.

a clHref="cat"> . . . a>

Another awesome feature of the clHref attribute directive is that you can apply transformation as attributes on the anchor tag for the linked image:

a clHref="cat" width="150" gravity="auto" crop="thumb"> ... a>

It is worth noting that the transformation directive, cl-transformation, also can be added to anchor tags bearing the attribute directives:

a clHref="cat" width="150" gravity="auto" crop="thumb"> cl-transformation height="150" width="150" crop="fill" effect="sepia">cl-transformation> a>

Fetch Images from Cloudinary

In our example, we do not plan on displaying a single image. Instead, we want to fetch a list, iterate over the list and display each item in the list as a card.

We can fetch these images by making an HTTP request to Cloudinary once our component is initialized with the ngOnInit lifecycle method:

export class AppComponent implements OnInit{ title = 'app works!'; cards = []; constructor( // Inject HTTP service private http: Http ){} ngOnInit() { // Fetch images tagged 'scotch' and set the images to 'cards' this.http.get('http://ift.tt/2kPKpET') .map(data => data.json().resources) .subscribe(resources => { this.cards = resources }); } }

For security reasons, Cloudinary will not allow you to make requests like this from the client. The best method is to use the admin API via a backend SDK and then send the resource list to the client.

However, to enable access to list resources from client, you need to enable client resource listing. This is not recommended in production environment but is fine for demo purposes.

With the fetch logic out of the way, we now iterate over the cards property in the template to render them:

div class="gallery"> a class="gallery__item" clHref= *ngFor="let card of cards"> div class="gallery__item-image"> cl-image public-id="" class="img" format="jpg"> cl-image> div> div class="gallery__item-content"> div> a> div>

Auto Cropping and Format Techniques

Currently, the image is fetched and displayed without any transformation. There is a cost to this, because what is fetched is the actual large image and the size is reduced with just CSS. While this fine for demo purposes, it is important to note that it will be a very expensive act for production apps.

With Cloudinary’s auto cropping features, you can transform the images before they are delivered to your browser. Cloudinary does the heavy lifting and you are served with image that maintain the same quality but with less weight.

div class="gallery"> a class="gallery__item" clHref= *ngFor="let card of cards"> div class="gallery__item-image"> cl-image public-id="" class="img" format="jpg"> cl-transformation width="150" quality="auto" crop="fill">cl-transformation> cl-image> div> div class="gallery__item-content"> div> a> div>

Some image formats are overkill for various delivery situations. It would not make sense to display a simple banner with no need for transparency using the png format. Cloudinary is smart enough to deliver the right format for your needs, even when you upload an unnecessary format. Just as we set quality to auto, we can set fetch_format to auto as well for auto format technique:

div class="gallery"> a class="gallery__item" clHref= *ngFor="let card of cards"> div class="gallery__item-image"> cl-image public-id="" class="img" format="jpg"> cl-transformation width="150" quality="auto" crop="fill" fetch_format="auto">cl-transformation> cl-image> div> div class="gallery__item-content"> div> a> div>

Demo

Conclusion

Now that you have seen how to craft Scotch-like image cards in Angular 2x with Cloudinary, there are a few important things to keep in mind. For example, you will want to use the Angular 2 SDK to deliver images, rather than talking to the Cloudinary client API directly. In addition, the cl-image and cl-video are used to deliver images and videos respectively, and the cl-transformation can be used to apply transformations to both types of files. And finally, the attribute directives, clSrc and clHref, are used to request the absolute URL of a media file based on the public ID provided.

To try this for yourself, sign up with Cloudinary for free and get started.

via Scotch.io http://ift.tt/2ldiJe5

#IFTTT #Feedly

0 notes